@utility c-tooltip {
	@layer components {
		position: absolute;

		display: block; /* required for animation to work */

		max-width: 100dvw;
		max-width: 100vw;
		padding: 0.25rem 0.5rem;

		color: var(--color-fg);

		opacity: 0;
		background-color: var(--color-bg-100);
		border: 1px solid var(--color-outline);
		box-shadow: 0 0 8px var(--color-bg-100);

		transition-timing-function: var(--default-transition-timing-function);
		transition-duration: 250ms;
		transition-property: opacity;

		&.enhanced {
			z-index: 1;
			top: 0;
			left: 0;

			overflow: visible;

			/* Avoid layout interference */
			width: max-content;
			height: fit-content;
			margin: 0;
		}

		&:popover-open {
			opacity: 1;
			transition-duration: 120ms;
		}

		& > .arrow {
			pointer-events: none;

			position: absolute;
			z-index: -1;

			width: calc(var(--spacing) * 3);
			height: calc(var(--spacing) * 3);

			background-color: inherit;
			border-color: var(--color-outline);
			border-style: solid;
			border-right-width: 1px;
			border-bottom-width: 1px;
		}
	}
}
